<script setup lang="ts">
import {useSpinStore} from "@/store/system/spinStore";
import {computed} from "vue";

let spinStore = useSpinStore();
const spinning = computed(() => spinStore.loading);

</script>

<template>
  <div class="yuanBody fixed inset-0 z-[99999]" v-if="spinning">
    <div class="yuanMask absolute h-screen w-screen pointer-events-none z-[99998]"></div>
    <div class="relative w-full h-full">
      <div class="absolute w-full h-full">
        <div
            class="loading-1 absolute z-[99999] w-[13.75rem] h-[13.75rem] lg:w-[18.75rem] lg:h-[18.75rem] top-1/2 left-1/2 border-1 border-solid border-white/50 rounded-full">
          <div class="left-auto top-1/2 absolute -translate-x-[50%] -translate-y-[50%] rounded-full h-8 w-8">
            <div class="relative overflow-hidden max-w-[240px]">
              <div style="padding-top: 100%;"></div>
              <img class="block absolute top-0 h-full w-full object-cover left-0"
                   src="@/assets/background/connect.webp"
                   style="object-position: center center;"
                   alt="connect">
            </div>
          </div>
        </div>
        <div
            class="loading-2 absolute z-[99999] w-[26.25rem] h-[26.25rem] lg:w-[52.5rem] lg:h-[52.5rem] top-1/2 left-1/2 border-1 border-solid border-white/70 rounded-full">
          <div class="left-auto top-1/2 absolute -translate-x-[50%] -translate-y-[50%] rounded-full h-12 w-12">
            <div class="relative overflow-hidden max-w-[240px]">
              <div style="padding-top: 100%;"></div>
              <img class="block absolute top-0 h-full w-full object-cover left-0"
                   src="@/assets/background/connect.webp"
                   style="object-position: center center;"
                   alt="connect">
            </div>
          </div>
        </div>
        <div
            class="loading-3 absolute z-[99999] w-[41.25rem] h-[41.25rem] lg:w-[90rem] lg:h-[90rem] top-1/2 left-1/2 border-1 border-solid border-white/50 rounded-full">
          <div class="absolute bottom-0 left-0 right-0 top-0" style="rotate: -20deg;">
            <div class="left-auto top-1/2 absolute -translate-x-[50%] -translate-y-[50%] rounded-full h-16 w-16">
              <div style="padding-top: 100%;"></div>
              <img class="block absolute top-0 h-full w-full object-cover left-0"
                   src="@/assets/background/connect.webp"
                   style="object-position: center center;"
                   alt="connect">
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 top-0" style="rotate: 120deg;">
            <div class="left-auto top-1/2 absolute -translate-x-[50%] -translate-y-[50%] rounded-full h-16 w-16">
              <div style="padding-top: 100%;"></div>
              <img class="block absolute top-0 h-full w-full object-cover left-0"
                   src="@/assets/background/connect.webp"
                   style="object-position: center center;"
                   alt="connect">
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 top-0" style="rotate: 200deg;">
            <div class="left-auto top-1/2 absolute -translate-x-[50%] -translate-y-[50%] rounded-full h-16 w-16">
              <div style="padding-top: 100%;"></div>
              <img class="block absolute top-0 h-full w-full object-cover left-0"
                   src="@/assets/background/connect.webp"
                   style="object-position: center center;"
                   alt="connect">
            </div>
          </div>
        </div>
      </div>
      <div class="absolute top-1/2 left-1/2 w-36 h-36 lg:w-48 lg:h-48 -translate-x-[50%] -translate-y-[50%] z-[99999]">
        <img src="@/assets/system/logo.svg" alt="logo">
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
/*加载动画*/
.yuanBody {
  background: linear-gradient(rgb(139, 199, 255) 48.55%, rgb(164, 237, 234) 100%);
}

.loading-1 {
  animation: animation_small-ball-rotate 35s linear infinite;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(20deg);
}

.loading-2 {
  animation: animation_middle-ball-rotate 40s linear infinite;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(25deg);
}

.loading-3 {
  animation: animation_large-ball-rotate 45s linear infinite;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(0deg);
}

@keyframes animation_small-ball-rotate {
  0% {
    transform: translate3D(-50%, -50%, 0) rotate(20deg)
  }

  50% {
    transform: translate3D(-50%, -50%, 0) rotate(200deg)
  }

  to {
    transform: translate3D(-50%, -50%, 0) rotate(380deg)
  }
}

@keyframes animation_middle-ball-rotate {
  0% {
    transform: translate3D(-50%, -50%, 0) rotate(25deg)
  }

  50% {
    transform: translate3D(-50%, -50%, 0) rotate(205deg)
  }

  to {
    transform: translate3D(-50%, -50%, 0) rotate(385deg)
  }
}

@keyframes animation_large-ball-rotate {
  0% {
    transform: translate3D(-50%, -50%, 0) rotate(0deg)
  }

  to {
    transform: translate3D(-50%, -50%, 0) rotate(1turn)
  }
}
</style>
